/* 数据盘 与 IntputRange 关联 */

.dataPlate {
    --controlLen: 330;
    /* 轨道直径 */
    /* --trackDiameter: 330px; */
    --trackDiameter: calc(var(--controlLen, 330) * 1px);
    /* 轨道宽度 */
    /* --trackWide: 15px; */
    --trackWide: calc(var(--trackDiameter) * 0.0455);
    /* 色彩限制 */
    --start: 35%;
    --startLeng: 30%;
    /* 初始进度 */
    --progress: 48%;
    --progressLeng: 4%;
    /* 数据标签间隔 */
    --labelData: 10%;
    /* 底色 */
    --backColor: var(--BackgroundBlue, rgba(239, 242, 255, 1));
    /* 轨道颜色 */
    --trackColor: var(--StandardBlue, rgba(64, 96, 255, 1));
    /* 盘颜色 */
    --plateColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 覆盖颜色 */
    --coverColor: var(--BackgroundDeepBlue, rgba(209, 217, 255, 1));
    /* 盘阴影 */
    --plateShadow: var(--ShadowBlue, rgba(207, 215, 255, 1));
    /* 标签字体 */
    --labelFont: var(--FontBlack, rgba(30, 32, 34, 1));
    /* 数据字体 */
    --dataFont: var(--FontLightBlack, rgba(119, 131, 143, 1));

    /* font-family: "Noto Sans SC"; */
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 轨道样式 */
.dataPlate .progress {
    display: inline-block;
	width: var(--trackDiameter);
	height: var(--trackDiameter);
	background: conic-gradient(
        from 180deg,
        var(--trackColor) var(--start),
        var(--coverColor) var(--progress) calc(var(--progress) + var(--progressLeng)),
        var(--trackColor) calc(var(--start) + var(--startLeng))
    );
	border-radius: 50%;
	position: relative;
    transition: all .3s;
}

.dataPlate .progress::before {
    content: "";
    position: absolute;
    inset: var(--trackWide);
    background-color: var(--backColor);
    width: calc(var(--trackDiameter) - var(--trackWide) * 2);
    height: calc(var(--trackDiameter) - var(--trackWide) * 2);
    text-align: center;
    border-radius: 50%;
}

/* 盘样式 */
.dataPlate .plate {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    width: calc(var(--trackDiameter) - var(--trackWide) * 4.6);
    height: calc(var(--trackDiameter) - var(--trackWide) * 4.6);
    border-radius: 50%;
    background-color: var(--plateColor);
    top: calc(var(--trackWide) * 2.3);
    left: calc(var(--trackWide) * 2.3);
    box-shadow: 0px 2px 47px var(--plateShadow);
}

/* 标签伪类 */
.dataPlate .plate::before {
    content: "Vibration Frequency";
    /* font-size: 13px; */
    font-size: calc(var(--trackDiameter) * 0.0393);
    font-weight: 700;
    color: var(--labelFont);
    text-align: center;
    vertical-align: top;
}

/* 数值 */
.dataPlate .plate::after {
    content: attr(dataFoo);
    /* font-size: 24px; */
    font-size: calc(var(--trackDiameter) * 0.0727);
    font-weight: 400;
    color: var(--dataFont);
    text-align: center;
    vertical-align: top;
}

.dataPlate .dataPlateInputRangeSpace {
    height: calc(var(--trackDiameter) * 0.1061);
    /* height: 100px; */
}